import React from 'react';
import { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';

export interface ResponsiveProps {
  /**
   * 移动端渲染内容
   */
  mobile?: React.ReactNode;

  /**
   * 平板端渲染内容
   */
  tablet?: React.ReactNode;

  /**
   * 桌面端渲染内容
   */
  desktop?: React.ReactNode;

  /**
   * 默认渲染内容（当对应断点无特定内容时）
   */
  children?: React.ReactNode;
}

/**
 * Responsive 组件
 * 根据当前断点条件渲染对应的子组件
 *
 * @example
 * <Responsive
 *   mobile={<MobileNav />}
 *   desktop={<DesktopNav />}
 * />
 */
export const Responsive: React.FC<ResponsiveProps> = ({
  mobile,
  tablet,
  desktop,
  children
}) => {
  const breakpoint = useBreakpoint();

  // 根据断点返回对应内容
  if (breakpoint === 'mobile' && mobile) {
    return <>{mobile}</>;
  }

  if (breakpoint === 'tablet' && tablet) {
    return <>{tablet}</>;
  }

  if (breakpoint === 'desktop' && desktop) {
    return <>{desktop}</>;
  }

  // 降级策略：tablet降级为desktop或mobile
  if (breakpoint === 'tablet') {
    if (desktop) return <>{desktop}</>;
    if (mobile) return <>{mobile}</>;
  }

  // 返回默认内容
  return <>{children}</>;
};

Responsive.displayName = 'Responsive';
